<template>
	<div class="main-box" >
		<OrgTree ref="orgTreeRef" @node-click="nodeClick" @back-org="backOrgData" />
		<div class="table-box">
			<ProTable ref="proTableRef" title="组织列表" :columns="columns" :requestApi="orgApi.page" :initParam="queryParams"
				:dataCallback="dataCallback">
				<template #tableHeader>

					<el-button size="default" type="success" class="ml10" @click="openAddOrg()" v-auth="'system:org:add'">
						<el-icon><ele-CirclePlus /></el-icon>{{ $t('message.orgOperation.add') }}
					</el-button>
				</template>
				<template #operation="scope">
					<el-button icon="ele-Edit" size="small" text type="primary" @click="openEditOrg(scope.row)"
						v-auth="'system:org:update'"> {{ $t('message.orgOperation.edit') }} </el-button>
					<el-button icon="ele-Delete" size="small" text type="danger" @click="delOrg(scope.row)"
						v-auth="'system:org:delete'"> {{ $t('message.orgOperation.delete') }} </el-button>
				</template>
			</ProTable>
			<EditOrg ref="editOrgRef" :title="state.editOrgTitle" :orgData="state.orgTreeData" :dictData="state.dictData"
				@refresh="refreshOrgData" />
		</div>
	</div>
</template>

<script lang="tsx" setup name="systemOrg">
import { reactive, ref, watchEffect } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import OrgTree from '/@/views/system/org/component/orgTree.vue';
import EditOrg from '/@/views/system/org/component/editOrg.vue';

import { feature } from '/@/utils/axios-utils';
import { SysDictData, SysOrg } from '/@/api-services/models/system';
import { useI18n } from 'vue-i18n';
import ProTable from '/@/components/ProTable/index.vue';
import orgApi from '/@/api-services/apis/system/orgApi';
import dictDataApi from '/@/api-services/apis/system/dictDataApi';
import { ColumnProps } from '/@/components/ProTable/interface';
// 定义变量内容
const { t } = useI18n();
const proTableRef = ref();
const editOrgRef = ref<InstanceType<typeof EditOrg>>();
const orgTreeRef = ref<InstanceType<typeof OrgTree>>();
const queryParams = reactive({
	parentId: -1
})
const state = reactive({
	loading: false,
	orgData: [] as Array<SysOrg>, // 机构列表数据
	orgTreeData: [] as Array<SysOrg>, // 机构树所有数据
	dictData: [] as Array<SysDictData>,//字典数据	
	editOrgTitle: '',
	initOrg: [] as Array<SysOrg>
});

const queryOrgType = async () => {
	var res = await dictDataApi.getDatalistByType("orgType")
	state.dictData = res.data.data ?? []
}
watchEffect(() => {
	queryOrgType();
});
//数据回显处理
const dataCallback = (queryRes: any) => {
	var data = queryRes.data;
	return {
		items: data.items,
		totalCount: data.totalCount,
		pageIndex: data.pageIndex,
		pageSize: data.pageSize
	};
};
const columns: ColumnProps<SysOrg>[] = [
	{
		prop: "orgName", label: t('message.orgInfo.orgName'),
		search: {
			el: "input", key: "orgName",
			props: { placeholder: t('message.orgInfo.orgName') }
		}
	},
	{ prop: "category", label: t('message.orgInfo.orgType') ,
		render:scope=>{
			var data=state.dictData.filter(item=>item.value==scope.row.category)[0]
			return (<el-tag size={data.tagSize} type={data.tagType}> {data.name}</el-tag>)    
		}
	},
	{ prop: "remark", label: t('message.orgInfo.remark'), },
	{ prop: "sortCode", label: t('message.orgInfo.sortCode'), },
	{ prop: "updateTime", label: t('message.orgInfo.editTime'), },
	{ prop: "operation", label: t('message.commonBtn.oper'), fixed: "right" }
]

//获取子组件传递的组织数据
const backOrgData = (orgData: Array<SysOrg>) => {
	//对orgData深拷贝
	var data = JSON.parse(JSON.stringify(orgData))
	//添加一层数据
	data.unshift({ id: 0, parentId: -1, orgName: '顶层' })
	state.orgTreeData = data
}

const refreshOrgData = async () => {
	handleQuery();
	// 编辑删除后更新机构数据
	orgTreeRef.value?.initTreeData();
}
// 查询操作
const handleQuery = async () => {
	proTableRef.value.getTableList();
};


// 打开新增页面
const openAddOrg = () => {
	state.editOrgTitle = t('message.orgOperation.addOrg');
	editOrgRef.value?.openDialog({});
};

// 打开编辑页面
const openEditOrg = (row: any) => {
	state.editOrgTitle = t('message.orgOperation.editOrg');
	editOrgRef.value?.openDialog(row);
};

// 删除
const delOrg = (row: any) => {
	ElMessageBox.confirm(`${t('message.orgAlter.isDeleteOrg')}:【${row.orgName}】?`, t('message.orgAlter.alter'), {
		confirmButtonText: t('message.orgAlter.confirm'),
		cancelButtonText: t('message.orgAlter.cancel'),
		type: 'warning',
	})
		.then(async () => {
			const [err] = await feature(orgApi.delete({ id: row.id }));
			if (err) {
				ElMessage.error(err.message)
			}
			else {
				ElMessage.success(t('message.orgAlter.deleteSuccess'));
				refreshOrgData();
			}
		})
		.catch(() => { });
};

// 树组件点击
const nodeClick = async (node: any) => {
	queryParams.parentId = node.id;
	handleQuery();
};

</script>
